<template>
  <div class="material-in-bound-page">
    <!-- 搜索区域 -->
    <div class="screenConditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <SelectBlock
            :allowClear="true"
            v-model="conditions.orgCode"
            @change="blockChange($event)"
          ></SelectBlock>
          <a-select v-model="warehouseId" disabled style="width: 200px">
            <a-select-option
              :value="item.warehouseId"
              v-for="(item, index) in warehouseSoucre"
              :key="index"
            >
              {{ item.warehouseId }}
            </a-select-option>
          </a-select>
          <!-- <a-input
            placeholder="请输入供应商"
            allowClear
            v-model="conditions.supplier"
          /> -->
          <a-input
            placeholder="请输入单据号"
            allowClear
            v-model="conditions.number"
          />
          <a-input
            placeholder="请输入领用客户"
            allowClear
            v-model="conditions.people"
          />
          <bjRangeCalendar
            :format="conditions.dateFormat"
            v-model="conditions.dateRange"
            :show-time="{ format: conditions.dateFormat }"
            @ok="calendarOk"
          ></bjRangeCalendar>
        </template>
        <template slot="operate">
          <a-button
            type="primary"
            @click="getListData(selectTreeNode.dicValue)"
          >
            查询
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <!-- 结果区域 -->
    <div class="result-container">
      <div class="result-body">
        <div class="tree-warp">
          <div class="tree-body" :class="treeVisible && 'open'">
            <div class="header">物料类型</div>
            <div class="tree-content">
              <div class="body">
                <a-tree
                  :default-expanded-keys="expandedKeys"
                  :expanded-keys="expandedKeys"
                  :selected-keys="selectedKeys"
                  blockNode
                  show-icon
                  default-expand-all
                  :tree-data="treeData"
                  @expand="onExpand"
                  @select="treeSelect"
                  :replaceFields="{
                    children: 'childList',
                    title: 'dicDesc',
                    key: 'dicValue',
                  }"
                >
                  <template slot="title" slot-scope="{ childList, dicDesc }">
                    <div class="tree-node-item">
                      <div
                        class="icon"
                        :class="childList && childList.length > 0 && 'folder'"
                      ></div>
                      <div class="name">
                        {{ dicDesc }}
                      </div>
                    </div>
                  </template>
                </a-tree>
              </div>
            </div>
          </div>
          <div
            class="close-button"
            :class="treeVisible && 'open'"
            @click="treeVisible = !treeVisible"
          ></div>
        </div>
        <div class="table-warp" v-loading="loading">
          <div class="operate-body">
            <a-button
              type="primary"
              v-if="conditions.orgCode"
              @click="gotoAdd()"
            >
              新增
            </a-button>
            <!--<a-button
              class="solid-line"
              v-if="conditions.orgCode"
              @click="importTemplate"
            >
              导入
            </a-button> -->
            <input
              accept=".xls,.xlsx"
              @change="importExcel"
              type="file"
              ref="upload"
              id="upload"
              style="display: none"
            />
            <a-button
              class="solid-line"
              @click="exportData()"
              :loading="exportLoading"
            >
              导出
            </a-button>
            <!-- <a-button
              class="solid-line"
              v-if="conditions.orgCode"
              @click="downloadTemplate()"
            >
              模板下载
            </a-button> -->
            <a-button
              class="solid-line"
              v-if="checkedList.length > 0"
              @click="printSelectEvent"
            >
              打印
            </a-button>
          </div>
          <div class="table-body">
            <vxe-table
              align="center"
              :data="tableData"
              show-overflow
              show-header-overflow
              show-footer-overflow
              :column-config="{ resizable: true }"
              class="scrollbarStyle"
              height="100%"
              :sort-config="{ trigger: 'cell' }"
              ref="xTable"
              :scroll-x="{ gt: 10 }"
              :scroll-y="{ gt: 100 }"
              row-id="id"
              :checkbox-config="{
                reserve: true,
              }"
              @checkbox-change="checkedChange"
              @checkbox-all="checkedChange"
            >
              <vxe-column type="checkbox" width="60"></vxe-column>
              <vxe-column type="seq" title="序号" width="80"></vxe-column>
              <vxe-column
                :title="item.title"
                :field="item.key"
                :key="index"
                min-width="120"
                show-overflow
                v-for="(item, index) in tableColumns"
              ></vxe-column>
              <vxe-column title="操作" fixed="right" width="130">
                <template slot-scope="scope">
                  <div class="text-button-group">
                    <a-button type="link" @click="gotoDetail(scope.row.id, 1)"
                      >查看</a-button
                    >
                    <!-- <a-button
                      type="link"
                      :disabled="!conditions.orgCode"
                      @click="gotoDetail(scope.row.id, 2)"
                      >编辑</a-button
                    > -->
                  </div>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div class="pager-body">
            <vxe-pager
              background
              :current-page.sync="pager.page"
              :page-size.sync="pager.pageSize"
              :total="pager.total"
              :layouts="[
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'Sizes',
                'FullJump',
              ]"
              @page-change="paginationChange"
            >
              <template #left>
                <div class="vxe-pager-left-tip-container">
                  第<span>1</span>到<span
                    >{{ Math.ceil(pager.total / pager.pageSize) }}页 </span
                  >共<span>{{ pager.total }}</span
                  >条记录
                </div>
              </template>
            </vxe-pager>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增页面 -->
    <addPage
      :visible.sync="addPageVisible"
      :orgCode="conditions.orgCode"
      :warehouseId="warehouseId"
      :key="addKey"
    ></addPage>
    <!-- 查看、编辑页面 -->
    <detailPage
      :visible.sync="viewPageVisible"
      :type="operateType"
      :id="id"
    ></detailPage>
  </div>
</template>

<script>
import ScreenConditions from "@/components/ScreenConditions";
import SelectBlock from "@/components/wisdom-beam/SelectBlock";
import bjRangeCalendar from "@/components/bj-range-calendar";
import VxeTableView from "@/components/VxeTableView";
import paginationMixins from "@/mixins/pagination";
import ChooseMaterial from "./components/ChooseMaterial.vue";
//新增页面
import addPage from "./views/add.vue";
//查看、编辑页面
import detailPage from "./views/detail.vue";
import {
  queryMaterialOutList,
  queryMaterialOutHasStorageDate,
  queryMaterialOutTotalData,
  exportDataMaterialOutbaseInfo,
  downloadMaterialOutTemplate,
  importMaterialOutExcel,
  materialTreeList,
  warehouseList,
} from "@/api/wisdom-beam/material-app";
import {
  _getUUID,
  notificationTip,
  downLoadFileByArraybuffer,
  getNowDateStr,
  convertCurrency,
  addAttributeByKey,
  flatTreeData,
} from "@/utils";
export default {
  components: {
    ScreenConditions,
    SelectBlock,
    bjRangeCalendar,
    VxeTableView,
    ChooseMaterial,
    addPage,
    detailPage,
  },
  mixins: [paginationMixins],
  data() {
    return {
      treeVisible: true,
      treeData: [],
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      selectTreeNode: {},
      addPageVisible: false,
      viewPageVisible: false,
      operateType: 1,
      id: "",
      exportLoading: false,
      loading2: false,
      tableData2: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      loading: false,
      visible: true,
      conditions: {
        //标段
        orgCode: undefined,
        //供应商
        supplier: "",
        //单据号
        number: "",
        //入库人
        people: "",
        //日期
        dateFormat: "YYYY-MM-DD HH:mm:ss",
        dateRange: [],
      },
      tableColumns: [
        {
          title: "单据号",
          dataIndex: "code",
          key: "code",
          width: "200px",
        },
        {
          title: "供应商",
          dataIndex: "supplier",
          key: "supplier",
          width: "180px",
        },
        {
          title: "领用人",
          dataIndex: "outbaseUser",
          key: "outbaseUser",
          width: "100px",
        },
        {
          title: "领用客户",
          dataIndex: "outbaseCustomer",
          key: "outbaseCustomer",
          width: "100px",
        },
        {
          title: "领用时间",
          dataIndex: "outbaseTime",
          key: "outbaseTime",
          width: "200px",
        },
        {
          title: "货物编码",
          dataIndex: "goodsNo",
          key: "goodsNo",
          width: "100px",
        },
        {
          title: "物料名称",
          dataIndex: "name",
          key: "name",
          width: "100px",
        },
        {
          title: "物料规格",
          dataIndex: "norms",
          key: "norms",
          width: "100px",
        },
        {
          title: "型号",
          dataIndex: "model",
          key: "model",
          width: "100px",
        },
        {
          title: "材质",
          dataIndex: "material",
          key: "material",
          width: "100px",
        },
        {
          title: "计量单位",
          dataIndex: "unit",
          key: "unit",
          width: "100px",
        },
        {
          title: "领用数量",
          dataIndex: "num",
          key: "num",
          width: "100px",
        },
        // {
        //   title: "含税单价",
        //   dataIndex: "price",
        //   key: "price",
        //   width: "100px",
        // },
        // {
        //   title: "含税金额",
        //   dataIndex: "amountInclusiveTax",
        //   key: "amountInclusiveTax",
        //   width: "100px",
        // },
      ],
      tableData: [],
      selectedRowKeys: [],
      totalAmount: "",
      rateAmount: "",
      checkedList: [], //所有选中的数据
      selectedCode: "",
      selectedSupplier: "",
      selectedCustomer: "",
      //仓库
      warehouseId: undefined,
      warehouseSoucre: [],
      addKey: 0,
    };
  },
  mounted() {},
  methods: {
    //查询仓库列表
    getWareHouseData() {
      return new Promise((resolve, reject) => {
        warehouseList()
          .then((res) => {
            this.warehouseSoucre = res?.data?.result ?? [];
            this.warehouseId =
              this.warehouseSoucre?.[0].warehouseId ?? undefined;
            resolve();
          })
          .catch((_) => {
            this.warehouseId = undefined;
            this.warehouseSoucre = [];
            reject();
          });
      });
    },

    getTreeList() {
      return new Promise((resolve, reject) => {
        this.treeLoading = true;
        materialTreeList({ dictType: "material_category" })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? [];
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "childList"
            );
            let flatData = flatTreeData(source, "childList");
            this.treeData = filterData;
            this.expandedKeys = flatData.map((v) => v.dicValue);
            let firstSonNode = flatData.find(
              (v) => !v.childList || v.childList.length == 0
            );
            this.selectTreeNode = firstSonNode;
            this.selectedKeys = [firstSonNode?.dicValue];
            if (firstSonNode) {
              this.addBtnShow = true;
            } else {
              this.addBtnShow = false;
            }
            this.getListData(firstSonNode?.dicValue);
            resolve();
          })
          .catch((_) => {
            this.expandedKeys = [];
            this.treeData = [];
            this.selectedKeys = [];
            this.addBtnShow = false;
            this.selectTreeNode = {};
            this.getListData();
            reject();
          })
          .finally((_) => {
            this.treeLoading = false;
          });
      });
    },

    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    treeSelect(selectedKeys, e) {
      let { selected } = e;
      let { dicValue, childList } = e.node.dataRef;
      this.selectTreeNode = e.node.dataRef;
      if (selected) {
        this.selectedKeys = selectedKeys;
        if (childList && childList.length > 0) {
          this.addBtnShow = false;
        } else {
          this.addBtnShow = true;
        }
        this.getListData(dicValue);
      }
    },

    // 导入
    importTemplate() {
      this.$refs.upload.click();
    },
    importExcel(event) {
      let files = event.target.files;
      let formdata = new FormData();
      for (let i = 0; i < files.length; i++) {
        formdata.append("fileUrl", files[i]);
      }
      importMaterialOutExcel(formdata)
        .then((res) => {
          event.target.value = "";
          if (res.data.result.success > 0) {
            notificationTip("success", "物料出库导入成功");
            this.getListData();
          } else {
            let msg = res.data.result.errorMsg.join("");
            notificationTip("error", msg, "提示", 2);
          }
        })
        .catch((err) => {
          event.target.value = "";
        });
    },

    // 复选框切换事件
    checkedChange({ checked, records, row }) {
      if (checked) {
        if (row) {
          // 单选
          let keys = this.checkedList.map((v) => v.id);
          let newNode = [];
          newNode = keys.includes(row.id) ? [] : [row];
          this.checkedList.push(...newNode);
        } else {
          this.checkedList = [...new Set(this.checkedList.concat(records))];
        }
      } else {
        if (row) {
          // 单选
          this.checkedList = this.checkedList.filter((v) => v.id != row.id);
        } else {
          let keys = this.tableData.map((v) => v.id);
          this.checkedList = this.checkedList.filter(
            (v) => !keys.includes(v.id)
          );
        }
      }
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getListData(this.selectTreeNode?.dicValue);
    },
    //  打印
    printSelectEvent() {
      this.selectedCode = this.checkedList[0].code;
      this.selectedSupplier = this.checkedList[0].supplier;
      this.selectedCustomer = this.checkedList[0].outbaseCustomer;
      let diff = this.checkedList.filter((v) => {
        return (
          v.code != this.selectedCode ||
          v.supplier != this.selectedSupplier ||
          v.outbaseCustomer != this.selectedCustomer
        );
      });
      if (diff.length > 0) {
        this.$message.error("请选择相同的单据号、供应商和领用客户");
        return;
      }

      let company = JSON.parse(localStorage.getItem("ORGANIZATION")).tenantName;
      let totalNum = 0,
        totalMoney = 0;
      this.checkedList.map((v) => {
        totalNum += Number(v.num);
        totalMoney += Number(v.amountInclusiveTax);
      });
      // 打印样式
      const printStyle = `
        @page {
            margin-bottom: 0mm;
            margin-top: 0mm;
        }
        .title {
            text-align: center;
        }
        .my-list-row {
            display: flex;
            flex-wrap: wrap;
        }
        .my-list-col {
           width: 50%;
           display: flex;
           line-height: 26px;
        }
        .my-list-col-right{
            justify-content: flex-end;
        }
        .my-list-col-item{
            margin-left: 10px;
        }
        .label{
            font-weight: bold;
        }
        .my-top,
        .my-bottom {
            font-size: 14px;
        }
        .my-top {
            margin-bottom: 5px;
        }
        .my-bottom {
            margin-top: 10px;
        }
        .page-footer {
            height:60px;
            width: 100%;
            line-height: 60px;
            z-index:2000;
            display: flex;
            margin-top:auto
        }
        .footer-item{
            width: 22%;
        }
        .footer-time{
            width: 30%;
        }
      `;
      // 打印顶部内容模板
      const topHtml = `
        <h2 class="title">${company}</h2>
        <h3 class="title">销售提货出库单</h3>
        <div class="my-top">
          <div class="my-list-row">
            <div class="my-list-col"><div class="label">制单日期：</div>${getNowDateStr()}</div>
            <div class="my-list-col"><div class="label">仓库名称：</div>${
              this.selectedSupplier
            }</div>
            <div class="my-list-col"><div class="label">单据号码：</div>${
              this.selectedCode
            }</div>
            <div class="my-list-col"><div class="label">客户：</div>${
              this.selectedCustomer
            }</div>
          </div>
        </div>
        `;
      // 打印底部内容模板
      //   const bottomHtml = `
      //     <div class="my-bottom">
      //       <div class="my-list-row">
      //         <div class="my-list-col">大写金额：${convertCurrency(
      //           totalMoney
      //         )}</div>
      //         <div class="my-list-col my-list-col-right">
      //             <div>总数量：${totalNum}</div>
      //             <div class="my-list-col-item">总金额：${totalMoney}</div>
      //         </div>
      //       </div>
      //     </div>`;
      const bottomHtml = ``;
      // 打印页脚内容模板
      const footerHtml = `<div class="page-footer">
        <div class="footer-item">经办人：</div>
        <div class="footer-item">签收人：</div>
        <div class="footer-time">打印时间：${getNowDateStr(true)}</div>
      </div>`;
      let columns = [];
      this.tableColumns.map((v) => {
        if (
          v.key == "name" ||
          v.key == "norms" ||
          v.key == "unit" ||
          v.key == "num" ||
          v.key == "price" ||
          v.key == "amountInclusiveTax"
        ) {
          columns.push({ field: v.key });
        }
      });

      this.$refs.xTable.print({
        sheetName: "",
        style: printStyle,
        mode: "selected",
        columns,
        data: this.checkedList,
        beforePrintMethod: ({ content }) => {
          // 拦截打印之前，返回自定义的 html 内容
          return topHtml + content + bottomHtml + footerHtml;
        },
      });
    },
    //模板下载
    downloadTemplate() {
      let { orgCode } = this.conditions;
      downloadMaterialOutTemplate({ orgCode: orgCode?.key || "" }).then(
        (data) => {
          downLoadFileByArraybuffer(data, "物料出库模板" + getNowDateStr());
        }
      );
    },

    //导出数据
    exportData() {
      let { orgCode, supplier, number, people, dateRange } = this.conditions;
      this.exportLoading = true;
      let { warehouseId = "" } = this;
      exportDataMaterialOutbaseInfo({
        orgCode: orgCode?.key || "",
        supplier,
        code: number,
        customer: people,
        startTime: dateRange[0] || "",
        endTime: dateRange[1] || "",
        warehouseId,
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "物料出库" + getNowDateStr());
          this.exportLoading = false;
        })
        .catch((_) => {
          this.exportLoading = false;
        });
    },

    gotoDetail(id, type) {
      this.operateType = type;
      this.id = id;
      this.viewPageVisible = true;
    },

    // 查询
    getListData(type = "") {
      this.loading = true;
      Promise.all([
        this.queryData(type),
        this.getDateList(type),
        this.getTotalData(type),
      ]).finally((_) => {
        this.loading = false;
      });
    },

    getTotalData(type = "") {
      return new Promise((resolve, reject) => {
        let { orgCode, supplier, number, people, dateRange } = this.conditions;
        queryMaterialOutTotalData({
          orgCode: orgCode?.key || "",
          supplier,
          type,
          code: number,
          inbaseUser: people,
          startTime: dateRange[0] || "",
          endTime: dateRange[1] || "",
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.totalAmount = result.totalAmount;
            this.rateAmount = result.rateAmount;
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //查询列表数据
    queryData(type = "") {
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.pager;
        let { orgCode, supplier, number, people, dateRange } = this.conditions;
        let { warehouseId = "" } = this;
        queryMaterialOutList({
          page,
          pageSize,
          type,
          orgCode: orgCode?.key || "",
          supplier,
          code: number,
          customer: people,
          startTime: dateRange[0] || "",
          endTime: dateRange[1] || "",
          warehouseId,
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.tableData = result.rows || [];
            this.pager.total = result.total;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          });
      });
    },

    //查询有数据的日期列表
    getDateList(type = "") {
      return new Promise((resolve, reject) => {
        let { orgCode, people, supplier } = this.conditions;
        queryMaterialOutHasStorageDate({
          orgCode: orgCode?.key || "",
          inventoryType: "",
          customer: people,
          type,
          supplier,
          name: "",
          code: "",
          inbaseUser: "",
        })
          .then((res) => {
            let { data } = res;
            this.hasDataDateList = data.result || [];
            resolve();
          })
          .catch((_) => {
            this.hasDataDateList = [];
            reject();
          });
      });
    },

    //监听标段切换
    blockChange() {
      this.getWareHouseData();
      this.getTreeList();
    },

    //监听日期选择
    calendarOk() {
      this.getListData(this.selectTreeNode?.dicValue);
    },

    //监听table选择
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

    //跳转新增页面
    gotoAdd() {
      this.addKey = Date.now();
      this.addPageVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.material-in-bound-page {
  height: 100%;
  padding: 0 0 10px 10px;
  box-sizing: border-box;
  .flex();
  flex-direction: column;
  /deep/.ant-select-selection.ant-select-selection--single {
    width: 100% !important;
  }
  /deep/.ant-table {
    .ant-table-body-outer {
      margin-bottom: 0;
    }
    .ant-table-fixed-right {
      height: calc(~"100% - 64px");
    }
  }
  .ant-table-footer {
    background: #fcfdff;
    color: #0098ff;
    font-size: 16px;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
    span {
      margin-right: 20px;
    }
  }
  .result-container {
    flex: 1;
    background: #fff;
    overflow: hidden;
    .flex();
    flex-direction: column;
    .result-header {
      height: 60px;
      flex-shrink: 0;
      .flex();
      align-items: center;
      padding: 0 26px 0 20px;
      .title {
        font-size: 18px;
        color: #525a5d;
        position: relative;
        padding-left: 14px;
        &::before {
          content: "";
          position: absolute;
          width: 3px;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          height: 16px;
          //   background: var(--primary-color);
        }
      }
      .operate-container {
        margin-left: auto;
      }
    }
    .result-body {
      flex: 1;
      width: 100%;
      overflow: hidden;
      background: #f3f4f6;
      .flex();
      .tree-warp {
        margin-right: 2px;
        background: #fff;
        flex-shrink: 0;
        margin-right: 15px;
        position: relative;
        .close-button {
          position: absolute;
          width: 8px;
          height: 56px;
          background: url("https://jszhgd.cn/static/pc/trial/close.png");
          background-size: 100% 100%;
          right: -8px;
          top: 50%;
          transform: translateY(-50%);
          cursor: pointer;
          &.open {
            background: url("https://jszhgd.cn/static/pc/trial/open.png");
            background-size: 100% 100%;
          }
        }
        .tree-body {
          width: 0;
          height: 100%;
          transition: 0.3s;
          overflow: hidden;
          .flex();
          flex-direction: column;
          &.open {
            width: 300px;
          }
          .header {
            height: 18px;
            border-left: 3px solid var(--primary-color);
            font-size: 18px;
            color: #525a5d;
            align-items: center;
            .flex();
            padding-left: 10px;
            margin: 12px;
            flex-wrap: nowrap;
            white-space: nowrap;
            flex-shrink: 0;
          }
          .tree-content {
            flex: 1;
            overflow: hidden;
            .body {
              height: 100%;
              .custom-scrollbar();
              padding: 0 10px;
              /deep/.ant-tree {
                li {
                  .ant-tree-node-content-wrapper {
                    width: calc(100% - 24px);
                    .tree-node-item {
                      overflow: hidden;
                      .flex();
                      align-items: center;
                      .icon {
                        width: 16px;
                        height: 16px;
                        background: url("https://jszhgd.cn/static/pc/file.png");
                        margin-right: 6px;
                        &.folder {
                          background: url("https://jszhgd.cn/static/pc/folder.png");
                          background-size: 100% 100%;
                        }
                      }
                      .name {
                        flex: 1;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .table-warp {
        flex: 1;
        width: 1px;
        .flex();
        flex-direction: column;
        .operate-body {
          height: 60px;
          background: #fff;
          .flex();
          align-items: center;
          justify-content: flex-end;
          padding-right: 10px;
        }
        .table-body {
          flex: 1;
          overflow: hidden;
        }
        .pager-body {
          height: 80px;
        }
      }
    }
  }

  /deep/.vxe-table--render-default
    .is--checked.vxe-cell--checkbox
    .vxe-checkbox--icon:before,
  /deep/.vxe-table--render-default
    .is--indeterminate.vxe-cell--checkbox
    .vxe-checkbox--icon:before {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
  }
  /deep/.vxe-pager.is--border .vxe-pager--num-btn.is--active,
  /deep/.vxe-select.is--active > .vxe-input .vxe-input--inner,
  /deep/.vxe-pager .vxe-pager--jump .vxe-pager--goto:focus,
  /deep/.vxe-table--render-default
    .vxe-cell--checkbox:not(.is--disabled):hover
    .vxe-checkbox--icon:before {
    border-color: var(--primary-color);
  }
  /deep/.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active,
  /deep/.vxe-pager .vxe-pager--num-btn:not(.is--disabled):hover,
  /deep/.vxe-pager .vxe-pager--next-btn:not(.is--disabled):hover,
  /deep/.vxe-pager .vxe-pager--prev-btn:not(.is--disabled):hover,
  /deep/.vxe-pager .vxe-pager--jump-next:not(.is--disabled):hover {
    color: var(--primary-color);
  }
}
</style>
